<template>
  <div class="main" ref="myRef"></div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core'
  // 引入柱状图图表，图表后缀都为 Chart
  import { LineChart  } from 'echarts/charts'
  // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
  } from 'echarts/components'
  // 标签自动布局，全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers'

  // 注册必须的组件
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LineChart,
  ])

  const myRef = ref()
  onMounted(() => {
    var myChart = echarts.init(myRef.value)
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }

    option && myChart.setOption(option)
  })

  // 接下来的使用就跟之前一样，初始化图表，设置配置项
</script>

<style lang="scss" scoped>
  .main {
    width: 100%;
    height: 400px;
  }
</style>
